<template>
  <el-container>
    <el-header><h2>在线购票</h2></el-header>
    <el-main>
      <!-- 公告区域 -->
      <el-row>
        <el-col :span="24">
          <el-card class="announcement-card">
            <template #header>
              <div class="card-header">
                <span>公告</span>
              </div>
            </template>
            <div class="card-body">
              <p>为了营造良好的观影环境，请遵守以下观影礼仪：</p>
              <ol>
                <li>请保持安静，手机请调至静音或振动模式。</li>
                <li>请勿携带异味食品进入影厅。</li>
                <li>请对号入座，并将个人物品放在座位下方。</li>
                <li>电影放映期间，请勿频繁进出影厅。</li>
                <li>
                  学生票宾客需在入场时向检票人员提供相对应的全日制在读证明。
                </li>
              </ol>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="16">
          <!-- 座位选择区域 -->
          <div class="seat-container">
            <el-button
              v-for="seat in seats"
              :key="seat.label"
              :type="seat.selected ? 'primary' : ''"
              @click="selectSeat(seat)"
            >
              {{ seat.label }}
            </el-button>
          </div>
        </el-col>
        <el-col :span="8">
          <!-- 购票信息表单 -->
          <el-form label-width="80px">
            <el-form-item label="观影日期">
              <el-date-picker
                v-model="selectedDate"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="观影时间">
              <el-select v-model="selectedTime">
                <el-option
                  v-for="time in times"
                  :key="time"
                  :label="time"
                  :value="time"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="票价">
              <el-radio-group v-model="selectedPrice">
                <el-radio
                  v-for="price in prices"
                  :key="price.value"
                  :label="price.value"
                  >{{ price.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <el-button type="primary" @click="buyTicket">购票</el-button>
          </el-form>
        </el-col>
      </el-row>
    </el-main>

    <!-- 购票确认对话框 -->
    <el-dialog title="确认购票" v-model="dialogVisible" width="30%">
      <template v-slot:default>
        <p>{{ selectedMovie.title }}</p>
        <p>座位：{{ selectedSeat }}</p>
        <p>观影日期：{{ selectedDate }}</p>
        <p>观影时间：{{ selectedTime }}</p>
        <p>票价：{{ selectedPrice }}</p>
      </template>
      <template v-slot:footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmPurchase">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      selectedMovie: {}, // 初始化电影数据对象
      selectedDate: "",
      seats: [
        // A排座位
        ...Array.from({ length: 10 }, (_, i) => ({
          label: `A${i + 1}`,
          selected: false,
        })),
        // B排座位
        ...Array.from({ length: 10 }, (_, i) => ({
          label: `B${i + 1}`,
          selected: false,
        })),
        // C排座位
        ...Array.from({ length: 10 }, (_, i) => ({
          label: `C${i + 1}`,
          selected: false,
        })),
        // D排座位
        ...Array.from({ length: 10 }, (_, i) => ({
          label: `D${i + 1}`,
          selected: false,
        })),
      ],
      times: ["14:00", "16:00", "18:00", "20:00", "22:00"], // 静态的观影时间
      prices: [
        { label: "标准票价", value: "80" },
        { label: "学生票价", value: "50" },
      ],
      selectedTime: "19:00",
      selectedPrice: "80",
      selectedSeat: "",
      dialogVisible: false,
      pickerOptions: {
        disabledDate(time) {
          // 禁用过去的日期
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
    };
  },
  mounted() {
    // 从路由的查询参数中获取电影数据
    const movieData = this.$route.query;
    this.selectedMovie = {
      id: movieData.movieId,
      title: movieData.movieTitle,
      poster: movieData.moviePoster,
      rating: movieData.movieRating,
      synopsis: movieData.movieSynopsis,
      type: movieData.movieType,
      duration: movieData.movieDuration,
    };
  },
  methods: {
    selectSeat(seat) {
      this.seats.forEach((s) => {
        s.selected = s.label === seat.label;
      });
      this.selectedSeat = seat.label;
    },
    buyTicket() {
      // 检查用户是否登录
      if (!this.$store.state.user.username) {
        this.$message.error("您还未登录，请先登录再尝试!");
        this.$router.push("/login");
        return;
      }
      // 如果用户已登录，则继续购票流程
      if (!this.selectedSeat) {
        this.$message.error("请先选择座位");
        return;
      }
      this.dialogVisible = true;
      // 显示年月日的格式化日期
      this.selectedDate = this.selectedDate.toLocaleDateString();
    },
    confirmPurchase() {
      // 这里可以处理确认购票的逻辑

      // 显示确认消息
      this.$message.success(`购票成功，您的观影日期为：${this.selectedDate}`);

      this.$emit("add-to-order", this.order);
      this.$router.push({
        name: "order",
        query: {
          movieTitle: this.selectedMovie.title,
          orderDate: this.selectedDate,
          orderTime: this.selectedTime,
          orderSeat: this.selectedSeat,
        },
      });
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped>
.seat-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* 添加一些样式以改善座位布局的显示 */
  margin: 20px;
}
.el-button {
  margin: 5px;
}
.announcement-card {
  margin-bottom: 20px;
  text-align: left;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.card-body {
  font-size: 14px;
}

.card-body ul {
  list-style-type: disc;
  padding-left: 20px;
}
</style>
